<template>
  <a-card :bodyStyle="{display:'flex',padding:'0px'}"
  style="margin:5px;"
  class=""
  >
    <div slot="title" class="title">
      <div class="hover-show">
        <li>
          <span 
            :class="{'active':samplId}"
            @click="current = current===0?false:0"
          >数据集</span>
          <div class="hover-show-data"
          v-show="current===0"
          >
            <span 
            class="item" 
            v-for="item in samples"
            :class="{'active':samplId==item.id}"
            @click="selectsample(item)"
            >
              {{item.title}}
            </span>
          </div>
        </li>
        <li>
          <span
            :class="{'active':chooseVarName && chooseVarName.length}"
            @click="()=>{
              if(samplId)
                current = current===1?false:1
              else
                $message.warn('请先选择数据集')
            }"
          >分析字段</span>
          <div v-show="current==1">
            <a-list
              :data-source="columns"
              :pagination="{
                pageSize:pageSize,
                showSizeChanger:true,
                size:'small',
                onShowSizeChange:(a,b)=>{
                  pageSize = b
                }
              }"
            >
              <div slot="header" style="display: flex;align-items: center;">
                <a-input-search 
                  placeholder="过滤变量"
                  :loading="searchLoading"
                  @change="searchChange"
                  @pressEnter="searchChange"
                />
              </div>
              <a-list-item 
                :key="`item-${item}`"
                slot="renderItem" slot-scope="item, index">
                <a-checkbox :checked="chooseVarName.includes(item)"
                  @change="()=>{
                    const index = chooseVarName.indexOf(item)
                    if(index === -1)
                      chooseVarName.push(item)
                    else
                      chooseVarName.splice(index,1)
                  }"
                >
                  {{item}}
                </a-checkbox>
              </a-list-item>
            </a-list>
          </div>
        </li>
        <li style="display: flex;">
          <span>
            <a-button-group>
              <a-button 
                type="default"
                title="提交" 
                icon="check"
                @click="getEchartData" 
              />
              <a-button v-if="eclength === 2" 
                @click="handleConversion"
                title="轴交换"
                type="default" icon="retweet" />
            </a-button-group>
          </span>
        </li>
      </div>
    </div>
      <a-spin
        tip="Loading..."
        class="body-center"
        :spinning="spinning"
      />
      <!-- 两变量相关性 -->
      <variables-scatter-plot-chart
        ref="plotchart"
        v-if="eclength === 2 && scatterData && scatterData.length" 
        :scatterData="scatterData" 
        :xIdData="xId"
        :yIdData="yId"
      />
      <!-- 多变量相关性 -->
      <variables-scatter-heat-map 
        class="plot_box"
        ref="heatmapchart"
        v-else-if="eclength >= 2 && heatmapData && heatmapData.length" 
        :heatmapData="heatmapData"
        :scatterDataMore="scatterDataMore" 
        :xAxis="x_axis" 
        :yAxis="y_axis"
      >
      </variables-scatter-heat-map>
      
      <div
      v-else-if="!spinning"
      style="font-size: 24px;"
      class="body-center "
      >
        请选择数据计算图形
      </div>
      <!--
        <div style="background: #000;
          position: absolute;
          top: 50%;
          left: 50%;
        ">test</div>
      -->
  </a-card>
</template>

<script>
import choosemixin from './mixins/choosemixin'
import variablesScatterPlotChart from './modules/blglPlotChart'
import variablesScatterHeatMap from './modules/blglHeatMap'
import {
  getvariablesTwo,
  getvariablesMore
} from '@/axios/analysisBatchApi'

export default{
  components:{
    variablesScatterPlotChart,
    variablesScatterHeatMap
  },
  mixins:[choosemixin],
  data(){
    return{
      xData:[],
      num:Object.freeze(7),
      type:Object.freeze(true),
      yData:[],
      spinning:false,
      //两变量
      xId:null,
      yId:null,
      scatterData:[],
      //多变量
      scatterDataMore: [],
      heatmapData: [],
      x_axis: [],
      y_axis: [],
      //type
      eclength:null//2-两  >2-多
    }
  },
  methods:{
    getEchartData() {
      const { samplId,subNumber,subType,chooseVarName } = this
      const { length } = chooseVarName
      if( !samplId || !chooseVarName || !length){
        this.$message.error("请选择要分析的字段")
        return
      }else if(length < 2){
        this.$message.error("至少选择两个字段")
        return
      }else{
        this.spinning = true
        this.current = false
        //单
        this.xId = null
        this.yId = null
        this.scatterData = []
        //多
        this.scatterDataMore = []
        this.heatmapData = []
        this.x_axis = []
        this.y_axis = []
        const { samplId } = this
        if(length === 2){
          const [ xId,yId ] = chooseVarName
          this.xId = xId
          this.yId = yId
          console.log({ xId,yId,samplId })
          getvariablesTwo({ xId,yId,samplId }).then(res => {
            this.scatterData = res.data.scatter_data
            this.selectNumType = 'two'
            this.eclength = length
            this.spinning = false
            this.$nextTick(()=>{
              const sampleName = this.samples.find(e=>e.id === samplId).title
              const { plotchart } = this.$refs
              plotchart.sampleName = sampleName
            })
          })
        }else{
          getvariablesMore({
            varName: chooseVarName.join(','),
            samplId
          }).then(res => {
            const { heatmap_data,x_axis,y_axis } = res.data
            this.heatmapData = heatmap_data
            this.x_axis = x_axis
            this.y_axis = y_axis
            this.scatterDataMore = heatmap_data.map(item => {
              const num = item[2] === null ? 0 : Math.abs(item[2])
              item[2] = num
              return [item[1], item[0], num]
            })
            this.spinning = false
            this.eclength = length
            this.$nextTick(()=>{
              const sampleName = this.samples.find(e=>e.id === samplId).title
              const { heatmapchart } = this.$refs
              heatmapchart.sampleName = sampleName
            })
          })
        }
      }
    },
    handleConversion(){
      this.chooseVarName.reverse()
      this.getEchartData()
    }
  }
}
</script>

<style lang="less" scoped>
@titleHeight:40px;
/deep/.ant-card-head{
  height: @titleHeight;
  min-height: @titleHeight;
  display: flex;
  font-weight: 700;
  &-title{
    overflow: unset;
  }
  .title{
    display: flex;
    align-items: center;
  }
}
/deep/.ant-card-body{
  height: calc(100vh - @titleHeight - 56px);
  overflow-y: scroll;
  .body-center{
    margin:auto;
  }
}
.title-icon{
  margin-left: 50px;
  .change-by{
  margin-left: 5px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    &:hover{
      color: #1890ff !important;
    }
  }
}
//
.sel_item{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
//
.info_item{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
//
.checkbox-item{
  display: block;
  margin-left: 0px !important;
}
/deep/.ant-list-items{
  max-height: 300px;
  min-width:320px;
  overflow-y: scroll;
}
/deep/.ant-list-pagination{
  margin-top: 4px;
}
</style>
